<template>
  <!-- 学习经历 -->
  <div class="my-experince">
    <div class="main">
      <div class="header">
        <el-form :inline="true">
          <el-form-item label="内容">
            <el-input placeholder="请输入需要查询的内容" v-model="pageQuery.content"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择状态" v-model="pageQuery.status" clearable>
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="find">查询</el-button>
            <el-button @click="replace">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="addExperienceController(-1)">
              <el-icon><Plus /></el-icon>
              <span>新增学习经历</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deleteBatch">
              <el-icon><Minus /></el-icon>
              <span>批量删除</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="body">
        <el-table stripe :data="expperinceList" @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="内容" prop="content"></el-table-column>
          <el-table-column label="状态" width="70" prop="status">
            <template #default="scope">
              <span
                :class="scope.row.status === 0 ? 'blue' : 'red'"
                @click="updateStatus(scope.row.id, scope.row.status === 0 ? 1 : 0)"
                >{{ scope.row.status === 0 ? '启用' : '禁用' }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="120"
            show-overflow-tooltip
            prop="createTime"
          ></el-table-column>
          <el-table-column
            label="修改时间"
            width="120"
            show-overflow-tooltip
            prop="updateTime"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button
                :text="true"
                size="small"
                type="primary"
                @click="addExperienceController(scope.row.id)"
                >编辑</el-button
              >
              <el-button :text="true" size="small" type="danger" @click="deleteById(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          v-model:current-page="pageQuery.page"
          v-model:page-size="pageQuery.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handelPageChangge"
          @size-change="handelPageSizeChange"
        ></el-pagination>
      </div>
      <el-dialog v-model="addExperienceHide" width="500">
        <el-form :model="addExperienceQuery" :rules="rules" ref="formRef">
          <el-form-item label="学习经历" prop="content">
            <el-input
              type="textarea"
              v-model="addExperienceQuery.content"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="请选择创建时间" prop="createTime">
            <el-date-picker
              v-model="addExperienceQuery.createTime"
              type="datetime"
              placeholder="请选择"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addExperience">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref, useTemplateRef } from 'vue'
import { Plus, Minus } from '@element-plus/icons-vue'
import {
  addStudyExperienceService,
  deleteBatchStudyExperienceService,
  getStudyExperienceByIdSerivce,
  getStudyExperiencePageQueryService,
  updateStatusStudyExperienceService,
  updateStudyExperienceService,
} from '@/api/StudyExperience'

const expperinceList = ref([])

// 分页查询参数
const total = ref(0)
const pageQuery = ref({
  page: 1,
  pageSize: 9,
  content: '',
  status: null,
})

/**
 * 修改学习经历状态
 */
const updateStatus = (id, status) => {
  console.log(id, status)
  updateStatusStudyExperienceService({
    id,
    status,
  }).then(() => {
    getStudyExperienceList(pageQuery.value)
  })
}

const addExperienceHide = ref(false)
const addExperienceQuery = ref({
  content: '',
  createTime: '',
})
const formRef = useTemplateRef('formRef')
// 表单验证
const rules = {
  content: [
    {
      required: true,
      message: '内容不能为空',
      trigger: 'blur',
    },
  ],
  createTime: [
    {
      required: true,
      message: '请选择创建时间',
      trigger: 'blur',
    },
  ],
}

const study_experience_id = ref(-1)

const addExperienceController = async (id) => {
  addExperienceHide.value = true
  if (id === -1) {
    // 说明是新增 不用回显数据
  } else {
    // 说明是修改
    const { data } = await getStudyExperienceByIdSerivce(id)
    study_experience_id.value = data.id
    addExperienceQuery.value.content = data.content
    addExperienceQuery.value.createTime = data.createTime
  }
}

/**
 * 新增学习经历
 */
const addExperience = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 通过表单验证
      if (study_experience_id.value === -1) {
        // 新增
        addStudyExperienceService(addExperienceQuery.value).then(() => {
          addExperienceHide.value = false
          getStudyExperienceList(pageQuery.value)
          addExperienceQuery.value = {
            content: '',
            createTime: '',
          }
        })
      } else {
        // 修改
        updateStudyExperienceService({
          id: study_experience_id.value,
          content: addExperienceQuery.value.content,
          createTime: addExperienceQuery.value.createTime,
        }).then(() => {
          getStudyExperienceList(pageQuery.value)
          addExperienceHide.value = false
          addExperienceQuery.value = {
            content: '',
            createTime: '',
          }
        })
      }
    }
  })
}

/**
 * 分页查询相关
 * @param page
 */
const handelPageChangge = (page) => {
  pageQuery.value.page = page
  getStudyExperienceList(pageQuery.value)
}
const handelPageSizeChange = (pageSize) => {
  pageQuery.value.pageSize = pageSize
  getStudyExperienceList(pageQuery.value)
}

/**
 * 删除
 * @param id
 */
const experinceIds = ref([])
const deleteById = (id) => {
  ElMessageBox.confirm('你确认删除这条学习经历吗?', 'Warning', {
    type: 'warning',
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  }).then(() => {
    experinceIds.value.push(id)
    deleteBatchStudyExperienceService(experinceIds.value).then(() => {
      experinceIds.value = experinceIds.value.filter((item) => item.id === id)
      getStudyExperienceList(pageQuery.value)
    })
  })
}
const handleSelectionChange = (row) => {
  const obj = JSON.parse(JSON.stringify(row))
  experinceIds.value = []
  obj.forEach((item) => {
    experinceIds.value.push(item.id)
  })
  console.log(experinceIds.value)
}
// 批量删除
const deleteBatch = () => {
  if (experinceIds.value.length === 0) {
    return ElMessage.error('未选中任何数据')
  }
  ElMessageBox.confirm(`你确定删除这${experinceIds.value.length}条数据吗?`, 'Warning', {
    type: 'warning',
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  })
    .then(() => {
      deleteBatchStudyExperienceService(experinceIds.value).then(() => {
        getStudyExperienceList(pageQuery.value)
        experinceIds.value = []
      })
    })
    .catch(() => {
      ElMessage.success('取消删除')
    })
}

/**
 * 条件查询
 */
const find = () => {
  console.log(pageQuery.value)
  getStudyExperienceList(pageQuery.value)
}
/**
 * 重置
 */
const replace = () => {
  getStudyExperienceList({
    page: 1,
    pageSize: 9,
    content: '',
    stauts: null,
  }).then(() => {
    pageQuery.value = {
      page: 1,
      pageSize: 9,
      content: '',
      stauts: null,
    }
  })
}

/**
 * 获取数据列表
 * @param pageQuery
 */
const getStudyExperienceList = async (pageQuery) => {
  const { data } = await getStudyExperiencePageQueryService(pageQuery)
  expperinceList.value = data.records
  total.value = data.total
}

onMounted(() => {
  getStudyExperienceList(pageQuery.value)
})
</script> 

<style lang="scss" scoped>
.my-experince {
  padding: 15px;
  background-color: #f3f4f5;

  .main {
    min-height: 100vh;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;

    .header {
      :deep(.el-select__wrapper) {
        width: 150px;
      }
    }

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}

.blue {
  cursor: pointer;
  color: #37b4fd;
}
.red {
  cursor: pointer;
  color: red;
}
::v-deep.el-table .cell {
  text-align: center !important;
}
</style>